<!DOCTYPE html>
<html class="app">
<head>
    <meta charset="utf-8" />
    <title>直播监测平台</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    <!--=== 第三方bootstrap css ===-->
    <link rel="stylesheet" href="../../public/default/common/css/bootstrap.css" type="text/css" />
    <!--=== 右边菜单动画 css ===-->
    <link rel="stylesheet" href="../../public/default/common/css/animate.css" type="text/css" />
    <!--=== font 图标 css ===-->
    <link rel="stylesheet" href="../../public/default/common/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="../../public/default/common/css/font.css" type="text/css" />
    <!--=== simple 图标 css ===-->
    <link rel="stylesheet" href="../../public/default/common/css/simple-line-icons.css" type="text/css" />
    <!--=== common css ===-->
    <link rel="stylesheet" href="../../public/default/common/css/app.css" type="text/css" />
    <!--=== 左边菜单 css ===-->
    <link rel="stylesheet" href="../../public/default/common/css/component.css" type="text/css" />
    <!--=== 抽样房间区域 css ===-->
    <link rel="stylesheet" href="../../public/default/common/css/pogo-slider.min.css" type="text/css" />
    <!--=== 导航区域 css ===-->
    <link rel="stylesheet" href="../../public/default/source/css/menu.css" type="text/css" />

    <!--=== [if lt IE 9] ===-->
    <script src="../../public/default/common/js/ie/html5shiv.js"></script>
    <script src="../../public/default/common/js/ie/respond.min.js"></script>
    <script src="../../public/default/common/js/ie/excanvas.js"></script>
    <!--=== [endif] ===-->

    <style>
        img {
            max-width: 290px;
            height: 162px;
        }
        body{
            background:#fff url(../../public/default/common/images/background.png) no-repeat left top;
            background-size:100%;
        }
        /*观众举报边框特效*/
        .aa, .aa::before, .aa::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .aa {
            width: 200px;
            height: 140px;
            margin: 10px 5px 0px 5px;
            color: red;
            box-shadow: inset 0 0 0 0px rgba(255, 0, 0, 0.5);
        }
        .aa::before, .aa::after {
            content: '';
            z-index: -1;
            margin: -3%;
            box-shadow: inset 0 0 0 2px;
            animation: clipMe 8s linear infinite;
        }
        .aa::before {
            animation-delay: -4s;
        }
        .aa:hover::after, .aa:hover::before {
            background-color: rgba(255, 0, 0, 0.3);
        }

        @keyframes clipMe {
            0%, 100% {
                clip: rect(0px, 220.0px, 2px, 0px);
            }
            25% {
                clip: rect(0px, 2px, 220.0px, 0px);
            }
            50% {
                clip: rect(218.0px, 220.0px, 220.0px, 0px);
            }
            75% {
                clip: rect(0px, 220.0px, 220.0px, 218.0px);
            }
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }
        /*AI识别边框特效1*/
        .bb, .bb::before, .bb::after {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .bb {
            width: 200px;
            height: 140px;
            margin: 10px 5px 0px 5px;
            color: yellow;
            box-shadow: inset 0 0 0 0px rgba(255, 250, 0, 0.5);
        }
        .bb::before, .bb::after {
            content: '';
            z-index: -1;
            margin: -3%;
            box-shadow: inset 0 0 0 2px;
            animation: clipMe 8s linear infinite;
        }
        .bb::before {
            animation-delay: -4s;
        }
        .bb:hover::after, .bb:hover::before {
            background-color: rgba(255, 255, 0, 0.3);
        }

        /*@keyframes clipMe {*/
            /*0%, 100% {*/
                /*clip: rect(0px, 220.0px, 2px, 0px);*/
            /*}*/
            /*25% {*/
                /*clip: rect(0px, 2px, 220.0px, 0px);*/
            /*}*/
            /*50% {*/
                /*clip: rect(218.0px, 220.0px, 220.0px, 0px);*/
            /*}*/
            /*75% {*/
                /*clip: rect(0px, 220.0px, 220.0px, 218.0px);*/
            /*}*/
        /*}*/
        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

    </style>
</head>

<body>
    <!--=== 导航栏 开始 ===-->
    <header class="<!--bg-white-only--> header header-md navbar navbar-fixed-top-xs">
        <ul class="nav navbar-nav hidden-xs">
            <li>
                <a href="#nav,.navbar-header" data-toggle="class:nav-xs,nav-xs" class="text-muted">

                    <i class="fa fa-indent text"></i>
                    <i class="fa fa-dedent text-active"></i>
                </a>
            </li>
        </ul>
        <ul class="menu_ul">
            <li><a class="menu" href="">监管中心</a></li>
            <li><a class="menu" href="">监控管理</a></li>
            <li><a class="menu" href="">违规管理</a></li>
        </ul>
        <form class="suo_form navbar-left input-s-lg m-t m-l-n-xs hidden-xs" role="search">
            <div class="form-group" style="border: 1px solid rgba(35,84,150,0.4); border-radius:10px;box-shadow: 0 0 3px #000;">
                <div class="input-group" >
                            <span class="input-group-btn" >
                                <button type="submit" class="btn btn-sm bg-white btn-icon rounded" style="background-color:transparent">
                                    <i class="fa fa-search"></i>
                                </button>
                            </span>
                    <input type="text" class="form-control input-sm no-border rounded" placeholder="Search"  style="background-color:transparent">
                </div>
            </div>
        </form>
        <div class="navbar-right ">
            <ul class="nav navbar-nav m-n hidden-xs nav-user user">
                <li class="hidden-xs">
                    <a href="#" class="dropdown-toggle lt" data-toggle="dropdown">
                        <i class="fa fa-bell-o"></i>
                        <span class="badge badge-sm up bg-danger count">2</span>
                    </a>
                    <section class="dropdown-menu aside-xl animated fadeInUp">
                        <section class="panel bg-white">
                            <div class="panel-heading b-light bg-light">
                                <strong>You have <span class="count">2</span> notifications</strong>
                            </div>
                            <div class="list-group list-group-alt">
                                <a href="#" class="media list-group-item">
                                            <span class="pull-left thumb-sm">
                                              <img src="images/a0.png" alt="..." class="img-circle">
                                            </span>
                                            <span class="media-body block m-b-none">
                                              Use awesome animate.css<br>
                                              <small class="text-muted">10 minutes ago</small>
                                            </span>
                                </a>
                                <a href="#" class="media list-group-item">
                                            <span class="media-body block m-b-none">
                                              1.0 initial released<br>
                                              <small class="text-muted">1 hour ago</small>
                                            </span>
                                </a>
                            </div>
                            <div class="panel-footer text-sm">
                                <a href="#" class="pull-right"><i class="fa fa-cog"></i></a>
                                <a href="#notes" data-toggle="class:show animated fadeInRight">See all the notifications</a>
                            </div>
                        </section>
                    </section>
                </li>
            </ul>
        </div>
    </header>
    <!--=== 导航栏 结束 ===-->

    <!--=== 内容 开始 ===-->
    <div class="vbox">
        <section>
            <section class="hbox stretch">
                <aside class="bg-black dk aside hidden-print" id="nav" style="border: 1px solid rgba(35,84,150,0.4); border-radius:10px;box-shadow: 0 0 3px #000">
                    <section class="vbox">
                        <section class="w-f-md scrollable">
                            <div class="slim-scroll" data-height="auto" data-disable-fade-out="ture" data-distance="0" data-size="10px" data-railopacity="0.2">
                                <nav class="nav-primary hidden-xs">
                                    <ul class="nav bg clearfix">
                                        <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted"> </li>
                                        <li class="hidden-nav-xs padder m-t m-b-sm text-xs text-muted"> </li>
                                        <li>  <b class="badge bg-primary number pull-right">6</b><button class="md-trigger md-setperspective font-bold" data-modal="modal-3">类目</button></li>
                                        <li>  <b class="badge bg-primary number pull-right">6</b><button class="md-trigger md-setperspective font-bold" data-modal="modal-4">平台</button></li>
                                        <li>  <b class="badge bg-primary number pull-right">6</b><button class="md-trigger md-setperspective font-bold" data-modal="modal-5">分类</button></li>
                                        <li>  <b class="badge bg-primary number pull-right">6</b><button class="md-trigger md-setperspective font-bold" data-modal="modal-6">房间</button></li>
                                        <li class="m-b hidden-nav-xs"></li>
                                        <li class="m-b hidden-nav-xs"></li>
                                    </ul>
                                </nav>
                            </div>
                        </section>

                    </section>
                </aside>

                <!-- /.aside -->
                <section id="content">
                    <section class="hbox stretch">
                        <section class="vbox" >
                            <section class="scrollable padder-lg w-f-md" id="bjax-target">
                                <div class="row row-sm" style="margin:0px 5px 5px 5px;border: 1px solid rgba(35,84,150,0.4); border-radius:10px;box-shadow: 0 0 3px #000">
                                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                        <div class="pogoSlider" id="demo1">
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/1.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/2.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/3.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                        <div class="pogoSlider" id="demo2">
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/1.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/3.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/2.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                        <div class="pogoSlider" id="demo3">
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/2.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/1.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/3.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                        <div class="pogoSlider" id="demo4">
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/2.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/3.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/1.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                        <div class="pogoSlider" id="demo5">
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/3.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/1.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/2.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                                        <div class="pogoSlider" id="demo6">
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/3.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/2.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                            <div class="pogoSlider-slide" data-transition="fade">
                                                <a href="#"><img src="../../public/default/common/images/1.jpg" alt="" class="r r-2x img-full"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="border: 1px solid rgba(35,84,150,0.4); border-radius:10px;box-shadow: 0 0 3px #000">
                                    <div class="col-md-7">
                                        <div class="row row-sm">
                                            <div class="demo" style="margin-left:130px">
                                                <div id="map"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                </section>
                        </section>

                        <aside class="aside-md dk" id="sidebar" style="border: 1px solid rgba(35,84,150,0.4); border-radius:10px;box-shadow: 0 0 3px #000">
                            <h4 class="font-thin m-l-md m-t" style="font-weight: bolder;color: red;margin-left: 80px;">违规告警</h4>
                            <section class="vbox animated fadeInRight">
                                <section class="w-f-md scrollable hover">
                                    <ul class="list-group no-bg no-borders auto m-t-n-xxs js-slide-list">
                                        <li class="list-group-item">
                                            <div class="aa"  style="background: url(../../public/default/common/images/1.jpg) no-repeat 50%/100% rgba(0, 0, 0, 0.1);">
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="bb" style=" background: url(../../public/default/common/images/2.jpg) no-repeat 50%/100% rgba(0, 0, 0, 0.1);">
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="aa" style=" background: url(../../public/default/common/images/3.jpg) no-repeat 50%/100% rgba(0, 0, 0, 0.1);">
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="bb" style=" background: url(../../public/default/common/images/4.jpg) no-repeat 50%/100% rgba(0, 0, 0, 0.1);">
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="aa" style=" background: url(../../public/default/common/images/5.jpg) no-repeat 50%/100% rgba(0, 0, 0, 0.1);">
                                            </div>
                                        </li>
                                        <li class="list-group-item">
                                            <div class="bb" style=" background: url(../../public/default/common/images/3.jpg) no-repeat 50%/100% rgba(0, 0, 0, 0.1);">
                                            </div>
                                        </li>
                                    </ul>
                                </section>
                            </section>
                        </aside>
                    </section>
                    <a href="#" class="hide nav-off-screen-block" data-toggle="class:nav-off-screen,open" data-target="#nav,html"></a>
                </section>
            </section>
        </section>

        <!--=== 弹出的窗口 开始 ===-->
        <div class="md-modal md-effect-3" id="modal-3">
            <div class="md-content">
                <h3>类目</h3>
                <div>
                    <span>游戏</span><br>
                    <span>美食</span>
                    <button class="md-close">Close me!</button>
                </div>
            </div>
        </div>
        <div class="md-modal md-effect-3" id="modal-4">
            <div class="md-content">
                <h3>平台</h3>
                <div>
                    <span>游戏</span><br>
                    <span>美食</span>
                    <button class="md-close">Close me!</button>
                </div>
            </div>
        </div>
        <div class="md-modal md-effect-3" id="modal-5">
            <div class="md-content">
                <h3>分类</h3>
                <div>
                    <span>游戏</span><br>
                    <span>美食</span>
                    <button class="md-close">Close me!</button>
                </div>
            </div>
        </div>
        <div class="md-modal md-effect-3" id="modal-6">
            <div class="md-content">
                <h3>直播</h3>
                <div>
                    <span>游戏</span><br>
                    <span>美食</span>
                    <button class="md-close">Close me!</button>
                </div>
            </div>
        </div>
        <div class="md-overlay"></div>
        <!--=== 弹出的窗口 结束 ===-->
    </div>
    <!--=== 内容 结束 ===-->



<!--=== jquery ===-->
<script src="../../public/default/common/js/jquery.min.js"></script>
<!--=== Bootstrap ===-->
<script src="../../public/default/common/js/bootstrap.js"></script>
<!--=== Bootstrap ===-->
<script src="../../public/default/common/js/app.js"></script>
<!--=== 监控换面切换 ===-->
<script src="../../public/default/common/js/jquery.pogo-slider.min.js"></script>
<script src="../../public/default/common/js/home.js"></script>
<!--=== 地图 js ===-->
<script type="text/javascript" src="../../public/default/common/js/raphael.js"></script>
<script type="text/javascript" src="../../public/default/common/js/chinamapPath.js"></script>
<!--=== 弹出窗口 ===-->
<script  type="text/javascript" src="../../public/default/common/js/classie.js"></script>
<script  type="text/javascript" src="../../public/default/common/js/modalEffects.js"></script>

</body>
</html>